<template>
  <view>
    <view class="goodItem">
      <!-- 图片 -->
      <view class="goodPic">
        <radio v-if="showRadio" @click="changeStatus" :checked="item.goods_status" color="red"></radio>
        <image :src="item.goods_small_logo" mode="aspectFit" v-if="item.goods_small_logo"></image>
        <image :src="defaultPic" v-else></image>
      </view>
      <!-- 信息 -->
      <view class="info">
        <view class="title">{{ item.goods_name }}</view>
        <view class="pric">￥{{ item.goods_price | tofixed }}
        <view class="numBox">
          <uni-number-box v-if="showNemBox" v-model="item.goods_count" @change="numChange"></uni-number-box>
        </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'my-goods',
  props: {
    item: {
      type: Object,
      default: {}
    },
    // 控制选中框的显示和隐藏
    showRadio:{
      type:Boolean,
      default:false
    },
    // 控制进步器的显示与隐藏 
    showNemBox:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {};
  },
  filters: {
    tofixed(num) {
      return Number(num).toFixed(2);
    }
  },
  methods:{
    //  修改选中状态时会 触发
    changeStatus(){
      this.$emit('radio-change',{
        goods_id:this.item.goods_id,
        goods_status:!this.item.goods_status
      })
    },
    // 修改数量时会触发
    numChange(value){
      this.$emit('num-change',{
         goods_id:this.item.goods_id,
         goods_count:value
      })
    }
  }
};
</script>

<style lang="scss">
.goodItem {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.goodPic {
  display: flex;
  align-items: center;
  width: 150px;
  height: 90px;
}
image {
  width: 150px;
  height: 90px;
}
.info {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}
.pric {
  display: flex;
  justify-content: space-between;
  color: red;
  font-weight: 700;
  .numBox{
    flex:1;
    margin-left: 5px;
  }
}
</style>
